<template>
  <a-spin :spinning="loading" class="w-full">
    <div class="ml-1 mt-2">
      <table>
        <tbody>
          <tr>
            <th rowspan="2" class="w-28"></th>
            <th colspan="5" class="h-bgc h-text">右眼（OD）</th>
            <th colspan="5" class="h-bgc h-text">左眼（OS）</th>
            <th class="w-24 h-bgc"></th>
            <th class="w-24 h-bgc"></th>
          </tr>
          <tr>
            <td class="w-24 b-text-title">Sph</td>
            <td class="w-24 b-text-title">Cyl</td>
            <td class="w-24 b-text-title">Axis</td>
            <td class="w-24 b-text-title">VA</td>
            <td class="w-24 b-text-title">ADD</td>
            <td class="w-24 b-text-title">Sph</td>
            <td class="w-24 b-text-title">Cyl</td>
            <td class="w-24 b-text-title">Axis</td>
            <td class="w-24 b-text-title">VA</td>
            <td class="w-24 b-text-title">ADD</td>
            <td class="w-24 b-text-title">ADD</td>
            <td class="w-28 b-text-info">{{ tableData.globalAdd }}</td>
          </tr>
          <tr v-if="longOrShort == 1 || longOrShort == ''">
            <td rowspan="2" class="w-28 px-0">
              <a-checkbox disabled :checked="tableData.isLong" :checked-value="'1'" :un-checked-value="'0'">远用</a-checkbox>
            </td>
            <td class="b-text-info">{{ tableData.odLongSph }}</td>
            <td class="b-text-info">{{ tableData.odLongCyl }}</td>
            <td class="b-text-info">{{ tableData.odLongAxis }}</td>
            <td class="b-text-info">{{ tableData.odLongVa }}</td>
            <td class="b-text-info">{{ tableData.odLongAdd }}</td>
            <td class="b-text-info">{{ tableData.osLongSph }}</td>
            <td class="b-text-info">{{ tableData.osLongCyl }}</td>
            <td class="b-text-info">{{ tableData.osLongAxis }}</td>
            <td class="b-text-info">{{ tableData.osLongVa }}</td>
            <td class="b-text-info">{{ tableData.osLongAdd }}</td>
            <td class="b-text-title">PD</td>
            <td class="b-text-info">{{ tableData.longPd }}</td>
          </tr>
          <tr v-if="longOrShort == 1 || longOrShort == ''">
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info"><span class="b-text-title">RPD: </span>{{ tableData.odLongRpd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">棱镜: </span>{{ tableData.odLongPd }}</p>
                <!-- <p class="mb-0 b-text-info"><span class="b-text-title">瞳高: </span>{{ tableData.odLongPh }}</p> -->
                <p class="mb-0 b-text-info flex"><span class="b-text-title">瞳高: </span><a-input v-model:value="tableData.odLongPh" class="ml-1 t-input" /></p>
              </div>
            </td>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info"><span class="b-text-title">LPD: </span>{{ tableData.osLongRpd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">棱镜: </span>{{ tableData.osLongPd }}</p>
                <!-- <p class="mb-0 b-text-info"><span class="b-text-title">瞳高: </span>{{ tableData.osLongPh }}</p> -->
                <p class="mb-0 b-text-info flex"><span class="b-text-title">瞳高: </span><a-input v-model:value="tableData.osLongPh" class="ml-1 t-input" /></p>
              </div>
            </td>
            <td class="b-text-title">WD</td>
            <td class="b-text-info">{{ tableData.longWd }}</td>
          </tr>
          <tr v-if="longOrShort == 2 || longOrShort == ''">
            <td rowspan="2" class="w-28 px-0">
              <a-checkbox disabled :checked="tableData.isShort" :checked-value="'1'" :un-checked-value="'0'">近用</a-checkbox>
            </td>
            <td class="b-text-info">{{ tableData.odShortSph }}</td>
            <td class="b-text-info">{{ tableData.odShortCyl }}</td>
            <td class="b-text-info">{{ tableData.odShortAxis }}</td>
            <td class="b-text-info">{{ tableData.odShortVa }}</td>
            <td class="b-text-info">{{ tableData.odShortAdd }}</td>
            <td class="b-text-info">{{ tableData.osShortSph }}</td>
            <td class="b-text-info">{{ tableData.osShortCyl }}</td>
            <td class="b-text-info">{{ tableData.osShortAxis }}</td>
            <td class="b-text-info">{{ tableData.osShortVa }}</td>
            <td class="b-text-info">{{ tableData.osShortAdd }}</td>
            <td class="b-text-title">PD</td>
            <td class="b-text-info">{{ tableData.shortPd }}</td>
          </tr>
          <tr v-if="longOrShort == 2 || longOrShort == ''">
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info"><span class="b-text-title">RPD: </span>{{ tableData.odShortRpd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">棱镜: </span>{{ tableData.odShortPd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳高: </span>{{ tableData.odShortPh }}</p>
                <!-- <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳高: </span><a-input v-model:value="tableData.odShortPh" class="ml-1 t-input" />
                </p> -->
              </div>
            </td>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info"><span class="b-text-title">LPD: </span>{{ tableData.osShortRpd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">棱镜: </span>{{ tableData.osShortPd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳高: </span>{{ tableData.osShortPh }}</p>
                <!-- <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳高: </span><a-input v-model:value="tableData.osShortPh" class="ml-1 t-input" />
                </p> -->
              </div>
            </td>
            <td class="b-text-title">WD</td>
            <td class="b-text-info">{{ tableData.shortWd }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </a-spin>
</template>
<script setup>
const emit = defineEmits(['success'])
const props = defineProps({
  resourceData: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  },
  longOrShort: {
    //1：远用 2：近用 */
    type: String,
    default: () => ''
  }
})
const tableData = ref({})
watch(
  () => props.resourceData,
  (val) => {
    tableData.value = val
  },
  { immediate: true, deep: true }
)
watch(
  () => tableData.value,
  (val) => {
    emit('success', val)
  },
  { immediate: true, deep: true }
)
</script>
<style lang="less" scoped>
table,
th,
td {
  border: 1px solid #d7d7d7;
  border-collapse: collapse;
}
th {
  font-weight: normal;
}
th,
td {
  height: 44px;
  padding: 0px;
  text-align: center;
}
.h-bgc {
  background-color: #f2f2f2;
}
.h-text {
  color: #000;
  font-weight: 500;
  font-size: 16px;
}
.b-text-title {
  color: #000;
  font-size: 14px;
}
.b-text-info {
  color: #aaaaaa;
}
.t-input {
  width: 50px;
  height: 24px;
  border: none;
}
</style>
